// type: 不写默认蓝边框白背景 ; bule 蓝色底 ; stop 禁用状态 不可点击 // height:按钮高度 默认80rpx ; // width:按钮宽度
默认90% ; // fontSize：按钮中字体大小 默认27rpx; isTap 禁用状态下是否可点击
<template>
    <u-button
        :open-type="openType"
        :native-type="nativeType"
        :custom-style="btnCustomStyle"
        :hair-line="false"
        :disabled="disabled || isDisabled"
        :type="type"
        :size="size"
        :loading="loading"
        @getphonenumber="getphonenumber"
        @getuserinfo="$emit('getuserinfo')"
        @opensetting="$emit('opensetting')"
        @launchapp="$emit('launchapp')"
        @error="$emit('error')"
    >
        <slot />
    </u-button>
</template>

<script>
export default {
    props: {
        height: String,
        fontSize: String,
        width: String,
        type: {
            type: String,
            default: "scTheme"
        },
        size: {
            type: String,
            default: "normal"
        },
        nativeType: String,
        openType: String,
        color: String,
        borderColor: String,
        background: String,
        isTap: Boolean,
        disabled: Boolean,
        loading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isDisabled: false //是否禁用
        };
    },
    computed: {
        btnCustomStyle() {
            const defaultStyle = {
                width: this.width || "630rpx",
                height: this.height || "104rpx",
                "font-size": this.fontSize || "40rpx",
                color: this.color || "#ffffff",
                "letter-spacing": "1px",
                border: this.borderColor ? `1px solid ${this.borderColor}` : "",
                "border-radius": "16rpx",
                background: this.background || "linear-gradient(136deg, #6DB6FF 0%, #349AFF 100%)"
            };
            const banStyle = {
                width: this.width || "630rpx",
                height: this.height || "104rpx",
                "font-size": this.fontSize || "40rpx",
                color: this.color || "#484848",
                "letter-spacing": "1px",
                border: this.borderColor ? `1px solid ${this.borderColor}` : "",
                "border-radius": "16rpx",
                background: this.background || "#F5F5F5"
                // "box-shadow": "0px 3px 6px rgba(0, 0, 0, 0.16)",
            };

            let outPut = defaultStyle;
            this.isDisabled = false;

            switch (this.type) {
                case "stop":
                    // this.isDisabled = this.isTap ? false : true; //禁用按钮点击
                    outPut = banStyle;
                    break;
                case "scTheme":
                    // this.isDisabled = this.isTap ? false : true; //禁用按钮点击
                    outPut = defaultStyle;
                    break;
                default:
                    outPut = {
                        width: this.width || "630rpx",
                        height: this.height || "104rpx",
                        "font-size": this.fontSize || "40rpx",
                        "letter-spacing": "1px",
                        "border-radius": "16rpx"
                    };
            }
            // let styleStr = "";
            // Object.keys(outPut).forEach((key) => {
            //     styleStr += `${key}:${outPut[key]};`;
            // });
            // return styleStr;
            return outPut;
        }
    },
    methods: {
        getphonenumber(res) {
            this.$emit("getphonenumber", res);
        }
    }
};
</script>
<style lang="scss" scoped></style>
